<template>
 	<view class="backSubmit">
 		<!-- 材料归还 --- 待归还 组件 -->
 		<!-- 设备归还 待归还 组件-->
 		<baseInput @inputChange="inputChange" @clearInput="clearInput"></baseInput>
 		<view class="content">
 			<scroll-view class="scroll-box" scroll-y='true' @scrolltolower='scrolltolowerEx'>
 				<view class="info">
 					<checkbox-group @change="checkboxChange">
 						<view class="label" v-for="(item,index) in tableData" :key="index">
 							<view class="item">
 								<view class="header" @click.stop="getInfoItem(item)">
 									<image class="image" src="/subpackage-materials/static/project1.png" mode=""></image>
 									<view class="box">
 										<view class="t1">{{item.orgName || ''}}</view>
 										<view class="t2">{{item.subProjectName || ''}}</view>
 									</view>
 									<view class="back" @click.stop="getBackInfo(item)">
 										归还
 									</view>
 								</view>
 								<label>
 									<view class="item-body">
 										<view class="item-nav">
 											<view class="name">出库材料：</view>
 											<view class="value">{{item.materialNames}}</view>
 										</view>
 										<view class="item-nav">
 											<view class="name">出库编号：</view>
 											<view class="value">{{item.code}}</view>
 										</view>
 										<view class="item-nav">
 											<view class="name">出库时间：</view>
 											<view class="value">{{item.recordCreateDatetime}}</view>
 										</view>
 										<view class="item-nav">
 											<view class="name">操作人员：</view>
 											<view class="value">{{item.operator}}</view>
 										</view>
 									</view>
 									<!-- <checkbox :value="String(item.id)" :checked="item.check" class="checkbox color round" /> -->
 								</label>
 							</view>

 						</view>
 					</checkbox-group>
 				</view>
 			</scroll-view>
			<!-- <view class="buttonAll">
				<view class="all">
					<checkbox-group @change="allCheckboxChange" class="radio2">
						<label >
							<checkbox :value="materialAllObj.value" :checked='materialAllObj.check' class="color round"/>
							<text  class="text">{{ materialAllObj.name }}</text>
						</label>
					</checkbox-group>
					<view class="number">
						总计：{{selectNum}}个出库单
					</view>
				</view>			
				<view class="button">
					<u-button type="primary"  :loading="loading" text="一键归还" @click="submit"></u-button>
				</view>
			</view> -->
		</view>
	</view>
 </template>

 <script>
 	import baseInput from "@/components/baseInput/baseInput.vue"
 	import { getMaterialOutList ,getMaterialBackBatch} from "@/api/materials/materials.js"
	import { mapMutations, mapState } from "vuex"
 	import mixins from "@/utils/mixins.js"
 	export default {
 		name: "backSubmit",
 		mixins: [mixins],
 		components: {
 			baseInput
 		},
 		data() {
 			return {
 				loading: false,
 				keyword: "",
 				tableData: [],
 				pagination: {
 					total: "",
 					pageSize: 10,
 					currentPage: 1,
 					totalPage: 1,
 				},
 				flag: false,
				allCheckValue:false,
				selectNum:0,
				materialAllObj:{      // 材料全选
					name : '全选',
					value : 'all',
					check : false,	
				},
 			}
 		},
 		mounted() {
 			this.init()
 		},
 		methods: {
			...mapMutations('materials', ["getMaterialsGoBackSubmitItem","setGoBackInfoItem"]),
 			getInfoItem(item) {
				this.setGoBackInfoItem(item)
 				uni.navigateTo({
 					url: "/subpackage-materials/pages/materials/materialsGoBack/components/listInfo"
 				})
 			},
 			getBackInfo(item) {
				this.getMaterialsGoBackSubmitItem(item)
 				uni.navigateTo({
 					url: "/subpackage-materials/pages/materials/materialsGoBack/components/backList"
 				})
 			},
 			checkboxChange(e) {
				let checkList=e.detail.value
				this.selectNum=e.detail.value.length
				this.tableData.forEach(item=>{
					console.log(item.id)
					console.log(checkList)
					let index=checkList.indexOf(item.id+"")
					console.log('index',index)
					if(index!==-1){
						item.check=true
					}
				})
 			},
			allCheckboxChange(e){
				this.allCheckValue=e.detail.value.length>0
				this.tableData=	this.tableData.map(item=>({...item,check:this.allCheckValue}))
				if(this.allCheckValue){
					this.selectNum=this.tableData.length
				}else{
					this.selectNum=0
				}
			},
 			init() {
 				this.getList()
 			},
 			getList() {
				if(this.flag){
					return
				}
				// console.log('total',this.pagination.total)
				if(this.pagination.total !== "" &&  this.tableData.length >0  && this.tableData.length >= this.pagination.total ){
					return
				}
 				let _query = {
 					currPage: this.pagination.currentPage,
 					pageSize: this.pagination.pageSize,
 					params: {
 						code: this.keyword,
						returnFlag:true,
						projectOrgId:""
 					}
 				}
 				getMaterialOutList(_query).then(res => {
 					if (res.success) {
 						let list =res.result.list.map(item => ({...item, recordCreateDatetime: this.getDate2(item.recordCreateDate) }))
						list.forEach(item=>{
							if(item.projectCascade){
								item.projectName = item.projectCascade.split("/")[0] || ""
								item.subProjectName = item.projectCascade.split("/")[1] +'/'+item.projectCascade.split("/")[2] || ""
								item.check=false
							}
						})
						this.tableData = [...this.tableData, ...list]
 						this.pagination.total = res.result.total
 					}
 				})
 			},
 			inputChange(e) {
 				if (e) {
 					this.keyword = e
 				} else {
 					this.keyword = ""
 				}
 				// clearTimeout(this.time)
 				// this.time = setTimeout(() => {
 					this.pagination.currentPage = 1
 					this.tableData = []
 					this.getList()
 				// }, 500)
 			},
 			clearInput() {
 				this.keyword = ""
 				this.pagination.currentPage = 1
 				this.tableData = []
 				this.getList()
 			},
 			scrolltolowerEx() {
 				this.pagination.currentPage++
 				this.getList()
 			},
 			submit() {
				console.log(this.tableData,'this.tableData')
				let list=this.tableData.filter(item=>item.check)
				if(!list || list.length==0){
					uni.showToast({
						title:'请先选择材料',
						icon:'error'
					})
					return
				}
				let codes= []
				list.forEach(item=>{
					codes.push(item.code)
				})
				getMaterialBackBatch({codes:codes.join(",")}).then(res=>{
					if(res.success){
						uni.showToast({
							icon: "none",
							title: "保存成功"
						})
						this.pagination.currentPage = 1
						this.tableData=[]
						this.getList()
					}
				})
 			},
 		}
 	}
 </script>

 <style lang="scss" scoped>
 	.backSubmit {
 		padding-top: 16rpx;
 		font-family: PingFang SC-Bold, PingFang SC;
 		// padding-bottom: 180rpx;
 		.scroll-box{
 			// height: calc(100vh - 628rpx);
			height: calc(100vh - 460rpx);
 			padding-top: 10rpx;
 		}
 		.info {
 			padding-top: 34rpx;

 			.item {
 				width: 100%;
 				background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
 				box-shadow: 0rpx 0rpx 34rpx 2rpx rgba(47, 128, 237, 0.1);
 				border-radius: 8rpx 8rpx 8rpx 8rpx;
 				padding: 0rpx 35rpx;
 				box-sizing: border-box;
 				margin-bottom: 25rpx;
 				padding-bottom: 30rpx;

 				.header {
 					height: 144rpx;
 					display: flex;
 					align-items: center;
 					border-bottom: 2rpx solid #E0E7F6;

 					.image {
 						width: 70rpx;
 						height: 70rpx;
 						margin-right: 44rpx;
 						margin-left: 12rpx;
 					}

 					.box {
 						flex: 1;

 						.t1 {
 							font-size: 32rpx;
 							font-weight: bold;
 							color: #445469;
 							margin-bottom: 10rpx;
							max-width: 360rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
 						}

 						.t2 {
 							font-size: 28rpx;
 							font-weight: 500;
 							color: #6A819E;
							max-width: 360rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
 						}
 					}

 					.back {
 						width: 120rpx;
 						height: 62rpx;
 						background: rgba(47, 128, 237, 0.11);
 						border-radius: 32rpx;
 						font-size: 28rpx;
 						font-weight: bold;
 						color: #2F80ED;
 						line-height: 62rpx;
 						text-align: center;
 					}
 				}

 				.item-body {
 					font-size: 28rpx;
 					font-weight: 500;
 					color: #445469;
 					padding-left: 10rpx;
 					padding-top: 10rpx;

 					.item-nav {
 						display: flex;
 						margin-top: 22rpx;

 						.name {
 							width: 140rpx;
 						}

 						.value {
 							width: 360rpx;
 							white-space: nowrap;
 							overflow: hidden;
 							text-overflow: ellipsis;
 						}
 					}
 				}
 			}

 			.label {
 				position: relative;
 			}

 			.checkbox {
 				position: absolute;
 				top: 180rpx;
 				left: 600rpx;
 			}
 		}

 		.all{
 			margin-top: 25rpx;
 			padding: 0rpx 30rpx;
 			display: flex;
 			align-items: center;
 			.label{
 				display: flex;
 				align-items: center;
 				font-weight: 600;
 				color: #445469;
 				font-size: 32rpx;
 				margin-left: 15rpx;
 				.text{
 					margin-left: 10rpx;
 				}
 			}
 			.number{
 				flex: 1;
 				font-size: 24rpx;
 				font-weight: 600;
 				color: #445469;
 				text-align: right;
 				margin-right: 38rpx;
 			}
 		}
		.buttonAll{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #FFFFFF;
		}
 		.button {
 			margin-top: 30rpx;
 		}
 	}
 </style>
